<template>
  <div class="app-container">

    <div class="box-card">
      <div class="box-title">地区选择组件</div>
      <area-select-no-auth root-code="3708" v-model="queryParams.areaCode"/>
    </div>

    <div class="box-card">
      <div class="box-title">时间选择组件</div>
      <data-time-select v-model="queryParams.dataTime"/>
    </div>

    <div class="box-card">
      <div class="box-title">清除缓存组件</div>
      <clear-cache-btn :key-generator="keyGenerator"/>
    </div>

  </div>
</template>
<script>
export default {
  name: "TestComponent",
  data() {
    return {
      queryParams: {
        areaCode: '370811',
        dataTime: ''
      }
    };
  },
  methods: {
    keyGenerator(currentDataTime, currentArea) {
      return `test:${currentDataTime ? this.queryParams.dataTime : '*'}:${currentArea ? this.queryParams.areaCode : '*'}_*_*`;
    },
  }
};
</script>
<style lang="scss" scoped>
.box-card {
  float: left;
  width: 20%;
  padding: 15px;
  border-radius: 10px;
  margin-left: 15px;
  border: 1px solid #00afff;
  min-height: 120px;

  .box-title {
    font-weight: bolder;
    margin-bottom: 15px;
  }
}
</style>
